<template>
	<view class="page">
		<view class="shipping-address" v-if="info.address">
			<view class="address" >
				<text>{{info.address}} {{info.address_sub}}</text>
			</view>
			<view class="name-phone flex-box">
				<text>{{info.uname}}</text>
				<text class="tel">{{info.tel}}</text>
			</view>
		</view>
		<!-- 订单商品 -->
		<view class="order-goods">
			<view class="goods-list">
				<view class="list" v-for="(item,index) in 1" :key="index">
					<view class="thumb">
						<image :src="info.imglogo" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{info.title}}</text>
						</view>
						<view class="title-classify">
							<text class="one-omit">{{info.desc}}</text>
						</view>
						<view class="flex-box">
							<view class="price box-1">
								￥<text class="price-num">{{info.total_price}}</text>
							</view>
							<text class="num-size">x{{info.num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info" v-if="info.pay_type == 'transfer_parent'">
			<view class="info-list">
				<view class="info-title">
					商家信息
				</view>
				<view class="flex-box info-item">
					<text>卖家姓名</text>
					<text>{{info.order_payment_imgs.payee_info.name}}</text>
				</view>
				<view class="flex-box info-item">
					<text>联系方式</text>
					<text>{{info.order_payment_imgs.payee_info.phone}}</text>
				</view>
				<view class="flex-box info-item" v-if="info.order_payment_imgs.payment_type=='alipay' || info.order_payment_imgs.payment_type=='wechat'">
					<text>收款方式</text>
					<image class="img" :src="info.order_payment_imgs.payee_info.payment_code" @click="previewImage(info.order_payment_imgs.payee_info.payment_code)"></image>
				</view>
				<view  class="flex-box info-item" v-else>
					<text>收款方式</text>
					<text>银行卡</text>
				</view>
			</view>
		</view>
		<view class="order-info">
			<view class="info-list">
				<view class="info-title">
					支付方式
				</view>
				<view class="flex-box info-item">
					<text>订单编号</text>
					<text>{{info.order_sn}}</text>
				</view>
				<view class="flex-box info-item">
					<text>下单时间</text>
					<text>{{info.create_time}}</text>
				</view>
				<view class="flex-box info-item" v-if="info.pay_type == 'point' || info.pay_type =='cash'">
					<text>支付方式</text>
					<text>{{info.pay_type_text}}</text>
				</view>
				<view class="flex-box info-item" v-if="info.pay_type=='transfer_parent'">
					<text>支付方式</text>
					<text>{{info.order_payment_imgs.payment_type_text}}</text>
				</view>
				<view class="flex-box info-item" v-if="info.pay_time">
					<text>支付时间</text>
					<text>{{info.pay_time}}</text>
				</view>
				<view class="flex-box info-item" v-if="info.pay_type == 'transfer_parent' && info.order_payment_imgs.payment_imgs">
					<text>支付凭证</text>
					<image class="img" :src="info.order_payment_imgs.payment_imgs"  @click="previewImage(info.order_payment_imgs.payment_imgs)"></image>
				</view>
			</view>
		</view>
		<view class="order-info flex-box">
			<view class="flex-box price-box">
				<text>总计</text>
				<text class="price">￥{{info.total_price}}</text>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="footer-btn">
			<!-- <view class="del" v-if="info.status==1" @tap.stop="cancel(info.id)">
				<text>取消订单</text>
			</view>
			<view class="btn" v-if="info.status==0"  @tap.stop="confirmmeet(info.id,1)">
				
				<text class="action">确认付款</text>
			</view>
			<view class="btn" v-if="info.status==2"  @tap.stop="confirmGoods(info.id)">
				
				<text class="action">确认收货</text>
			</view> -->
			<view class="tel-btn " v-if="info.pay_type == 'transfer_parent'" @click="callFun()">
				联系商家
			</view>
		</view>
	</view>
</template>

<script>
	import { wxconfig } from "@/utils/mixin-wxconfig.js";
	export default {
		data() {
			return {
				id:0,
				info:{},
				back:false
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderDetails()
			if(option.back==1){
				this.back = true
			}
		},
		onBackPress(){
			if(this.back){
				uni.switchTab({
					url:'/pages/converge/converge'
				})
				return false
			}
		},
		methods:{
			previewImage(val){
				wx.ready(()=>{
					wx.previewImage({
					  current: val, // 当前显示图片的http链接
					  urls:[val]
					});
				})
			},
			//确认收货
			confirmGoods(id){
				uni.showModal({
					title: '温馨提醒',
					confirmText: "确定",
					confirmColor:'#D02227',
					content: "您确定要收货吗？",
					success: res => {
						if (res.confirm) {
							this.$u.api.ordersSub({
								order_id: id
							})
							.then(res => {
								console.log(res);
								this.$u.toast(res.msg)
								if (res.status) {
									uni.navigateBack()
								}
							})
							.catch(err => {
								console.log(err);
							})
						}
					}
				})
			},
			//拨打电话
			callFun(){
				// #ifdef H5
				window.location.href = `tel:${this.info.order_payment_imgs.payee_info.phone}`
				// #endif
			},
			// 付款
			confirmmeet(id,item){
				let _this = this
				uni.login({
					success: function(res) {
						console.log('uni.logo')
						//魅力值抵扣
						_this.$u.api.ordersPay({
							order_id:id,
							code: res.code
						})
						.then(res=>{
							console.log(res,'registerorder_create');
							let result = res.msg
							if(res.status){
								// 支付成功的回调中 创建绘本馆成功
								uni.showToast({
									title: '支付成功',
									icon: 'success',
									duration: 1500,
									success(){
										console.log('success')
										uni.redirectTo({
											url: '/pages/PayResult/PayResult',
										})
										
									}
								});
							}else if(res.code==-7){
								//微信支付
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.msg.timeStamp, // 时间戳从1970年1月1日至今的秒数，即当前的时间
									nonceStr: res.msg.nonceStr, // 随机字符串，长度为32个字符以下
									package: res.msg.package, // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx
									signType:res.msg.signType, //签名算法，暂支持 MD5
									paySign:  res.msg.paySign, // 签名
									success: function (res) {
										// 支付成功的回调中 创建绘本馆成功
										uni.showToast({
											title: '微信支付成功',
											icon: 'success',
											duration: 1500,
											success(){
												uni.redirectTo({
													url: '/pages/PayResult/PayResult',
												})
												
											}
										});
										
										
									},
									fail: function (err) {
										// 支付失败的回调中 用户未付款
										uni.showToast({
											title: '支付取消',
											duration: 1500,
											image: '/static/png/error_icon.png',
											success: function(){
												uni.navigateBack()
												
											}
										});
									}
								});
								
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
							
						})
					}
						
				})
			},
			// 取消订单
			cancel(para) {
				uni.showModal({
					title: '温馨提醒',
					confirmText: "确定取消",
					content: "确定要取消该订单吗？",
					success: res => {
						if (res.confirm) {
							this.$u.api.ordersCancel({
									order_id: para
								})
								.then(res => {
									console.log(res);
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
									if (res.status) {
										uni.navigateBack()
									}
								})
								.catch(err => {
									console.log(err);
								})
						}
					}
				})
			},
			// 订单详情
			getOrderDetails(){
				this.$u.api.ordersInfo({order_id:this.id}).then(res => {
					if (res.status) {
						this.info = res.msg
					}
				})
				.catch(err => {
					console.log(err);
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	@import 'OrderDetails.scss';
	.title-classify{
		font-size:24rpx;
		color:#555555;
		margin-bottom:20rpx;
	}
</style>
